<template>
  <div class="trading-app">
    <!-- 活动栏目 -->
    <div class="activebannerMain"
    v-if="promotionsInfoVo && promotionsInfoVo.promotionCodes && promotionsInfoVo.promotionCodes.length > 0 && activebanner">
      <span class="close hidden"
      @click="handleActivebannerClose()"><i class="el-dialog__close el-icon el-icon-close"></i></span>
      <div class="activebanner" v-if="promotionsInfoVo.bannerImages"
      @click="$router.push(`/events/${promotionsInfoVo.promotionCodes[0]}`)">
        <img :src="promotionsInfoVo.bannerImages[0]" alt="">
      </div>
    </div>
    <!-- <div class="activebannerMain" v-if="trad.symbol === 'NB_TRX'">
      <div class="activebanner" @click="$router.push(`/events/nb-activity`)">
        <img src="/static/activity/nbActivity/imgCn.png" alt="" v-if="$store.state.app.language === 'zh-CN'">
        <img src="/static/activity/nbActivity/imgTw.png" alt="" v-else-if="$store.state.app.language === 'zh-TW'">
        <img src="/static/activity/nbActivity/imgEn.png" alt="" v-else-if="$store.state.app.language === 'en'">
        <img src="/static/activity/nbActivity/imgKo.png" alt="" v-else>
      </div>
    </div> -->
    <!-- bos/eos交易对添加跳转到bos矿池banner -->
    <div class="activebannerMain">
      <div class="activebanner" @click="handleToBosNewpool" v-if="trad.a.name === 'BOS' && trad.b.name === 'EOS'">
        <img v-if="$store.state.app.language === 'zh-CN'"
          src="@/assets/img/newpos/bos-cn.png"
          alt="">
        <img v-else-if="$store.state.app.language === 'ko'"
          src="@/assets/img/newpos/bos-ko.png"
          alt="">
        <img v-else-if="$store.state.app.language === 'zh-TW'"
          src="@/assets/img/newpos/bos-tw.png"
          alt="">
        <img v-else
          src="@/assets/img/newpos/bos-en.png"
          alt="">
      </div>
    </div>
    <trading-heard class="box-shadow"
    :embed="embed"
    :trad="trad" :coin-info-for-index="coinInfoForIndex" />
    <div class="trading-center flex fontx">
      <div class="tcen-left box-shadow">
        <trading-left :trad="trad"
        :embed="embed"
        @listenDepthChange="handleDepthChange"
        :depth-data="depthData"
        @listenWalletLogin="handleWalletLogin"
        @listenWalletPermission="handleWalletPermission" />
      </div>

      <div class="tcen-cen">
        <div class="cen-top flex">
          <div class="top-left">
            <trading-center-top :trad="trad" :embed="embed" :depth-data="depthData"/>
          </div>
          <div class="top-right box-shadow" v-if="symbolListIsOpen">
            <trading-right-top :embed="embed"/>
          </div>
        </div>
        <div class="cen-bottom flex">
          <div class="bottom-left box-shadow">
            <trading-center-bottom
            :embed="embed"
            :trad="trad"
            :symbol-status-props="symbolStatusProps"
            @listenWalletLogin="handleWalletLogin"
            @listenWalletPermission="handleWalletPermission" />
          </div>
          <div class="bottom-right box-shadow">
            <trading-right-bottom
            :embed="embed"
            :trad="trad"
            @listenDetailAction="handleDetailAction"/>
          </div>
        </div>
      </div>
    </div>
    <div class="trading-bottom mt10">
      <trading-bottom
      :embed="embed"
      @listenDetailAction="handleDetailAction"
      :symbol-status-props="symbolStatusProps"/>
    </div>

    <div class="trading-bottom mt10">
      <trading-bottom-history
      :embed="embed"
      @listenDetailAction="handleDetailAction"/>
    </div>

    <!-- 订单成交详情 -->
    <el-dialog
      class="orderDetail"
      title="Newdex"
      :show-close='true'
      :visible.sync="orderDetailVisible"
      width="900px">
      <order-success-detail
      :order-detail-id="orderDetailId"
      :embed="embed"
      @listenDetailClose="orderDetailVisible=false"
      v-if="$appName === 'eosNewdex'"/>
      <tron-success-detail
      :order-detail-id="orderDetailId"
      @listenDetailClose="orderDetailVisible=false"
      v-if="$appName === 'tronNewdex'"/>
    </el-dialog>
  </div>
</template>

<script>
import Bus from '@/utils/bus';
import { EosModel } from '@/utils/eos/index';
import Io from '@/utils/socket/index';
import { handleParentUrl, getUrlParams, parseSymbol, websizeJump } from '@/utils/validate';
import OrderSuccessDetail from '@/components/OrderSuccessDetail';
import TronSuccessDetail from '@/components/TronSuccessDetail';
import TradingHeard from './components/TradingHeard';
import TradingLeft from './components/TradingLeft';
import TradingRightTop from './components/TradingRightTop';
import TradingRightBottom from './components/TradingRightBottom';
import TradingBottom from './components/TradingBottom';
import TradingBottomHistory from './components/TradingBottomHistory';
import TradingCenterBottom from './components/TradingCenterBottom';
import TradingCenterTop from './components/TradingCenterTop';

export default {
  name: 'trading-center',
  data() {
    return {
      tradByVuex: null,
      trad: { // 交易对信息 a/b 交易对
        id: null,
        a: { // 子级
          name: null,
          balance: null, // 买入方向的余额
          balanceFamt: null, // 买入方向的余额
          price: '', // 买入价
          code: ''
        },
        b: { // 父级
          name: null, // 币种名称
          balance: null, // 卖出方向的余额
          balanceFamt: null, // 卖出方向的余额
          price: '', // 卖出价
          code: ''
        },
        symbol: '',
        coinDecimal: 4, // 币种精度
        priceDecimal: 4, // 价格精度
        valuationCoinDecimal: 4, // 计价币种精度
        expenseChargeRate: 0, // 手续费
        riskStatus: 0, // 是不是风险币
        valuationChain: 'eos', // 当前交易对 属于什么链的
        baseChain: 'eos', // if valuationChain !== baseChain； 属于跨链
        crossNoLink: true, // 不跨链
        contractOnChain: null, // 是否合约交易币种
      },
      coinInfoForIndex: null,
      symbolStatusProps: {
        id: 0,
        status: 0, // 交易对状态(0-上架，1-暂停，2-下架中，3-下架，4-待上架)
        closeTime: null,
        noticeUrl: null,
        symbol: '',
        exchangeStatus: '1', // 站点是否维护
      },
      orderDetailVisible: false, // 订单成功详情
      tronOrderDetailVisible: false, // tron订单成功详情
      orderDetailId: null, // 订单成功详情id
      depthData: { // 深度数据
        timesatep: null,
      },
      appTrad: null,
      form: {
        symbolId: null,
        contract: null,
        symbol: null,
      },
      loading: false,
      getSymbolInfoEnd: false,
      activebanner: true,
      promotionsInfoVo: { // 活动配置
        bannerImages: [],
        promotionCodes: [],
      },
      priceDepthAsks: [], // 卖出深度
      priceDepthBids: [], // 买入深度
      symbolListIsOpen: true, // 是否显示右侧交易对列表
      bodyScrollHeight: 0, // body 高度
    };
  },
  props: {
    embed: {
      type: Boolean,
      default: false
    },
  },
  components: {
    TradingHeard,
    TradingLeft,
    TradingRightTop,
    TradingBottom,
    TradingBottomHistory,
    TradingRightBottom,
    TradingCenterBottom,
    TradingCenterTop,
    OrderSuccessDetail,
    TronSuccessDetail
  },
  watch: {
    '$store.state.app.trade.id': function change(val) {
      this.priceDepthAsks = [];
      this.priceDepthBids = [];
      this.loading = true;
      this.appTrad = this.$store.state.app.trade;
      const ticker = this.trad.symbol;
      if (ticker) {
        Io.cfwsUnsubscribe(`depth.${ticker}:${this.depthData.depthCheckedValue}`);
      }
      this.form = {
        symbolId: val,
        symbol: null,
      }
      this.handleGetTradInfo();
    },
    '$store.state.app.language': function change() {
      this.priceDepthAsks = [];
      this.priceDepthBids = [];
      this.handleGetTradInfo();
    }
  },
  created() {
  },
  mounted() {
    document.title = this.$t(`rout.${this.$route.meta.title}`);
    this.appTrad = this.$store.state.app.trade;
    const query = this.$route.params.trade;
    this.form = {
      symbolId: !this.appTrad ? null : this.appTrad.id,
      symbol: null,
    }
    if (query) {
      this.form = {
        symbolId: null,
        symbol: query,
      }
    }
    if (!this.loading) {
      this.handleGetTradInfo();
    }
    if (this.embed) {
      // 如果是内嵌交易
      this.handleEmbedMounted();
    }
  },
  beforeDestroy() {
    const symbol = this.trad.symbol;
    Io.cfwsUnsubscribe(`depth.${symbol}:${this.depthData.depthCheckedValue}`);
    window.removeEventListener('message', this.handleReceiveMessage, false);
  },
  methods: {
    // 获取交易对状态
    handleGetSymbolStatus() {
      const statusParams = {
        symbolId: this.appTrad.id
      }
      if (!statusParams.symbolId) return;
      this.$http.post('/symbol/getSymbolStatus', statusParams).then((res) => {
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        this.symbolStatusProps = res.symbolStatus;
        this.symbolStatusProps.exchangeStatus = Number(res.exchangeStatus);
      });
    },

    // 获取交易对信息
    handleGetTradInfo() {
      if (this.getSymbolInfoEnd) return;
      this.getSymbolInfoEnd = true;
      this.$http.post('/symbol/getSymbolInfo', this.form).then((res) => {
        if (res.code === 1004) {
          this.getSymbolInfoEnd = false;
          // this.$message.error(`Error ${this.$t('public.symbol')}`);
          // this.$router.go(-1);
          return;
        }
        if (res.code !== 0) {
          this.$message.error(res.msg);
          this.getSymbolInfoEnd = false;
          return;
        }
        const item = res.symbolInfo;
        const itemCoin = res.coinInfo;
        const valuationCoinInfo = res.valuationCoinInfo;
        this.promotionsInfoVo = res.promotionsInfoVo; // 活动配置
        this.coinInfoForIndex = itemCoin;
        const symbolFamt = parseSymbol(item.symbol, item.askContract);
        this.trad.id = item.id;
        this.trad.a.name = symbolFamt[1].toUpperCase();
        this.trad.a.price = item.bidPrice; // 买入价
        this.trad.a.code = itemCoin.contract; // 智能合约
        this.trad.b.name = symbolFamt[2].toUpperCase();
        this.trad.b.price = item.askPrice; // 卖出价
        this.trad.b.code = item.bidContract; // 智能合约
        this.trad.dexEntrustedAccount = item.dexEntrustedAccount
        if (this.$appName === 'tronNewdex') {
          this.trad.b.code = item.askContract;
          this.trad.a.code = item.bidContract;
          if (item.bidContract.length > 32) {
            this.trad.a.trc = 'trc20'
          } else {
            this.trad.a.trc = 'trc10'
          }
          if (item.askContract.length > 32) {
            this.trad.b.trc = 'trc20'
          } else {
            this.trad.b.trc = 'trc10'
          }
        }
        this.trad.coinDecimal = itemCoin.coinDecimal; // 币种精度
        this.trad.priceDecimal = item.priceDecimal; // 价格精度
        this.trad.valuationCoinDecimal = item.valuationCoinDecimal; // 计价币种精度
        // this.trad.expenseChargeRate = itemCoin.expenseChargeRate; // 手续费
        this.trad.riskStatus = itemCoin.riskStatus; // 是否风险币种
        this.trad.symbol = item.symbol;
        this.trad.valuationChain = item.valuationChain.toLowerCase(); // 当前交易对 属于什么链的
        this.trad.baseChain = item.baseChain.toLowerCase(); // if valuationChain !== baseChain； 属于跨链
        this.trad.crossNoLink = item.baseChain === item.valuationChain; // false 属于跨链
        // this.trad.isMarketRemind = res.isMarketRemind; // 是否设置行情提醒 1-已设置 0-未设置
        this.trad.contractOnChain = item.onChain; // 1、是合约交易币种
        this.trad.valuationCoinInfo = valuationCoinInfo;
        this.trad.dexEntrustedAccount = item.dexEntrustedAccount; // 交易合约账户
        // 存档
        const params = this.$store.state.app.trade;
        if (this.appTrad && this.appTrad.id !== item.id) {
          params.id = item.id;
        }
        params.symbol1 = this.trad.a.name;
        params.symbol1_code = this.trad.a.code; // 智能合约
        params.symbol1_trc = this.trad.a.trc;
        params.symbol2 = this.trad.b.name;
        params.symbol2_code = this.trad.b.code; // 智能合约
        params.symbol2_trc = this.trad.b.trc;
        // params.expenseChargeRate = itemCoin.expenseChargeRate; // 手续费
        params.riskStatus = this.trad.riskStatus; // 是否风险币种
        params.coinDecimal = this.trad.coinDecimal; // 币种精度
        params.priceDecimal = this.trad.priceDecimal; // 价格精度
        this.depthData.depthCheckedValue = this.trad.priceDecimal; // 可切换的价格精度
        params.valuationCoinDecimal = this.trad.valuationCoinDecimal; // 计价币种精度
        params.valuationChain = this.trad.valuationChain; // 当前交易对 属于什么链的
        params.baseChain = this.trad.baseChain; // if valuationChain !== baseChain； 属于跨链
        params.crossNoLink = this.trad.baseChain === this.trad.valuationChain; // false 属于跨链
        params.symbol = this.trad.symbol;
        params.dexEntrustedAccount = this.trad.dexEntrustedAccount;
        this.$store.dispatch('setTrade', params);
        this.appTrad = params;
        this.handleDepthArray(this.trad.priceDecimal); // 获取深度切换列表
        this.handleDepthWs(this.trad.priceDecimal); // 获取深度数据
        this.handleGetSymbolStatus(); // 获取交易对状态
        this.getSymbolInfoEnd = false;
      });
    },
    // 获取深度数据
    handleDepthWs(priceDecimal) {
      const symbol = `${this.appTrad.symbol}:${priceDecimal}`;
      const params = { symbol };
      Io.cfwsDepth(params, (data) => {
        this.depthData.data = data;
        this.depthData.depthCheckedValue = priceDecimal;
        this.handleDepthWsForMat(data);
      });
    },
    handleDepthWsForMat(data) {
      if (data.full === 1) { // 全量 - 直接赋值
        this.handleDepthFull(data);
      } else { // 增量 - 判断增量变化
        this.handleDepthAdd(data)
      }
      this.depthData.asks = this.priceDepthAsks;
      this.depthData.bids = this.priceDepthBids;
      this.depthData.timesatep = new Date().getTime();
    },

    // 买卖盘全量数据处理
    handleDepthFull(data) {
      this.priceDepthBids = []; // 买入深度
      this.priceDepthAsks = []; // 卖出深度

      // 卖出深度
      if (data && data.asks && data.asks.length) {
        data.asks.forEach((v) => {
          const vv = v.split(':');
          const price = Number(vv[0]);
          const num = Number(vv[1]);
          const amount = Number(vv[2]);
          const item = {
            price,
            num,
            checked: false,
            amount,
          }
          this.priceDepthAsks.push(item);
        })
      }

      // 买入深度
      if (data && data.bids && data.bids.length) {
        data.bids.forEach((v) => {
          const vv = v.split(':');
          const price = Number(vv[0]);
          const num = Number(vv[1]);
          const amount = Number(vv[2]);
          const item = {
            price,
            num,
            checked: false,
            amount,
          }
          this.priceDepthBids.push(item);
        })
      }
    },

    // 买卖盘增量配置方法
    handleDepthAdd(data) {
      if (data && data.asks && data.asks.length) {
        data.asks.forEach((v) => {
          const vv = v.split(':');
          const price = Number(vv[0]);
          const num = Number(vv[1]);
          const amount = Number(vv[2]);
          if (num === 0) { // 所有撤单
            const rmIndex = this.priceDepthAsks.findIndex(val => val.price === price);
            if (rmIndex !== -1) {
              this.priceDepthAsks.splice(rmIndex, 1);
            }
          } else {
            const item = {
              price,
              num,
              checked: false,
              amount,
            }
            const hasPrice = this.priceDepthAsks.find(val => val.price === price);
            if (hasPrice) {
              // 价格存在
              const pindex = this.priceDepthAsks.findIndex(val => val.price === price);
              this.$set(this.priceDepthAsks, pindex, item);
            } else {
              this.priceDepthAsks.push(item);
            }
          }
        });
      }

      // 买入深度
      if (data && data.bids && data.bids.length) {
        data.bids.forEach((v) => {
          const vv = v.split(':');
          const price = Number(vv[0]);
          const num = Number(vv[1]);
          const amount = Number(vv[2]);
          if (num === 0) { // 所有撤单
            const rmIndex = this.priceDepthBids.findIndex(val => val.price === price);
            if (rmIndex !== -1) {
              this.priceDepthBids.splice(rmIndex, 1);
            }
          } else {
            const item = {
              price,
              num,
              checked: false,
              amount,
            }
            const hasPrice = this.priceDepthBids.find(val => val.price === price);
            if (hasPrice) {
              // 价格存在
              const pindex = this.priceDepthBids.findIndex(val => val.price === price);
              this.$set(this.priceDepthBids, pindex, item);
            } else {
              this.priceDepthBids.push(item);
            }
          }
        });
      }
    },

    // 获取深度切换列表
    handleDepthArray(priceDecimal) {
      const priceArr = [priceDecimal, priceDecimal - 1, priceDecimal - 2, priceDecimal - 3];
      this.depthData.depthArray = priceArr;
    },

    // 深度切换
    handleDepthChange(val) {
      const symbol = this.trad.symbol;
      Io.cfwsUnsubscribe(`depth.${symbol}:${this.depthData.depthCheckedValue}`);
      this.priceDepthAsks = [];
      this.priceDepthBids = [];
      this.handleDepthWs(val);
    },

    // 账户登录命令传递
    handleWalletLogin() {
      this.$emit('listenWalletLogin', true);
    },
    /**
     * 钱包授权
     */
    handleWalletPermission() {
      const checkWallet = localStorage.getItem('checkWallet');
      if (checkWallet && !Number(checkWallet)) {
        this.$emit('listenWalletPermission', true);
        return;
      }
      this.$emit('listenWalletLogin', true);
    },

    handleDetailAction(flg, obj) {
      this.orderDetailVisible = flg;
      this.orderDetailId = obj;
    },

    handleActivebannerClose() {
      this.activebanner = !this.activebanner;
    },

    // 嵌入交易代码 begin
    handleEmbedMounted() {
      const paUrl = getUrlParams(window.location.href);
      const paRef = paUrl ? paUrl.ref : null;
      if (paUrl && paUrl.symbols === '0') {
        this.symbolListIsOpen = false;
      }
      // 发起消息
      const targetOrigin = handleParentUrl(paRef);
      console.log('newdex -> request getAccount'); // eslint-disable-line
      // 获取用户
      const messageGetAccount = { action: 'getAccount', data: null }
      window.parent.postMessage(JSON.stringify(messageGetAccount), targetOrigin);
      console.log('newdex -> request getConfig'); // eslint-disable-line
      const messageGetConfig = { action: 'getConfig', data: null }
      window.parent.postMessage(JSON.stringify(messageGetConfig), targetOrigin);
      this.handleGetBodyScrollHeight();
      // 回调监听
      window.addEventListener('message', this.handleReceiveMessage, false);
    },

    // 嵌入交易代码 addEventListener message callback
    handleReceiveMessage(event) {
      const self = this;
      console.log('newdex -> back event'); // eslint-disable-line
      console.log(event); // eslint-disable-line
      // 这里不准确，chrome没有这个属性
      const origin = event.origin || event.originalEvent.origin;
      if (origin === window.location.origin) return;
      const message = JSON.parse(event.data);
      Bus.$emit('busReceiveMessage', message.action, message.data);
      switch (message.action) {
        case 'getAccount': {
          const params = message.data;
          const scatterItem = self.$store.state.app.scatter;
          if (!params.account) {
            // 退出登录
            localStorage.setItem('Frontend-Token', '');
            if (scatterItem.identity && scatterItem.identity.accounts) {
              Io.accountOut(scatterItem.identity.accounts[0].name);
              // this.$store.dispatch('setAccountAgree', false);
            }
            scatterItem.wallet = '';
            scatterItem.identity = null;
            self.$store.dispatch('setScatter', scatterItem);
            return;
          }
          if (scatterItem.identity && scatterItem.identity.accounts) {
            const name = scatterItem.identity.accounts[0].name;
            if (name === params.account) {
              return;
            }
            Io.accountOut(name);
          }
          scatterItem.chain = (params.blockchain || 'eos').toLowerCase();
          EosModel.chainNodeInit(scatterItem.chain);
          scatterItem.wallet = 'Scatter';
          const ironmanList = ['fibos', 'enu'];
          if (ironmanList.find(v => v === scatterItem.chain)) {
            scatterItem.wallet = 'Ironman';
          }
          scatterItem.identity = {
            accounts: [{
              authority: params.authority,
              name: params.account,
              blockchain: 'eos',
              publicKey: params.publicKey
            }],
          }
          self.$store.dispatch('setScatter', scatterItem);
          Io.accountBind(params.name);
          break;
        }
        case 'getConfig': {
          const params = message.data;
          if (params.language) {
            self.$i18n.locale = params.language;
            self.$store.dispatch('setLanguage', params.language);
          }
          if (params.theme) {
            const theme = params.theme === 'white' ? 'theme-278EDA' : 'theme-1B1D27';
            self.$store.dispatch('setTheme', theme);
          }
          break;
        }
        case 'getArbitrarySignature': {
          if (!self.$store.state.app.scatter.identity) {
            self.$message.error('User does not exist!');
            return;
          }
          const item = {
            signature: message.data,
            account: self.$store.state.app.scatter.identity.accounts[0].name,
            timestamp: self.signatureValue.timestamp,
            type: 'web'
          };
          self.handlePromition(item);
          break;
        }
        case 'transaction': {
          const res = message.data;
          console.log('transaction back'); // eslint-disable-line
          console.log(res); // eslint-disable-line
          break;
        }
        default:
      }
    },
    // 嵌入交易代码 后台授权判断
    handlePromition(params) {
      this.$http.post('/account/verify', params).then((res) => {
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        localStorage.setItem('Frontend-Token', res.token);
      });
    },
    // 嵌入交易代码 后台授权判断
    handleSignature(val) {
      this.signatureValue = val;
    },

    // 嵌入交易 body 高度实时获取
    handleGetBodyScrollHeight() {
      setTimeout(() => {
        const scrollHeight = window.document.getElementById('app').scrollHeight;
        if (this.bodyScrollHeight !== scrollHeight) {
          this.bodyScrollHeight = scrollHeight;
          const paUrl = getUrlParams(window.location.href);
          const paRef = paUrl ? paUrl.ref : null;
          const targetOrigin = handleParentUrl(paRef);
          console.log('newdex -> request setHeight'); // eslint-disable-line
          const messageGetConfig = { action: 'setHeight', data: { height: scrollHeight } }
          console.log(messageGetConfig); // eslint-disable-line
          window.parent.postMessage(JSON.stringify(messageGetConfig), targetOrigin);
        }
        this.handleGetBodyScrollHeight();
      }, 800);
    },
    // bos/eos交易对添加跳转到bos矿池
    handleToBosNewpool() {
      websizeJump('bos');
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

$-cent-height: 860px;
$-cent-width: 972px;

.trading-app {
  max-width: 1260px;
  margin: 0 auto;
  padding: 10px 0 30px 0;
}
.orderDetail {
  /deep/ .el-dialog__headerbtn {
    z-index: 100;
  }
}
.trading-center {
  padding: 0;
  margin-top: 10px;
  height: $-cent-height;

  .tcen-left {
    min-width: 278px;
    width: 278px;
    max-width: 278px;
    height: $-cent-height;
  }

  .tcen-cen {
    width: $-cent-width;
    margin: 0 0 0 10px;
    flex: 1;

    .cen-top {
      height: ($-cent-height*6) / 11 - 5;
      margin-bottom: 10px;

      .top-left {
        width: 100%;
        height: 100%;
      }
      .top-right {
        margin-left: 10px;
        width: 287px;
        min-width: 287px;
        height: 100%;
      }
    }
    .cen-bottom {
      height: ($-cent-height*5) / 11 - 5;
      .bottom-left {
        width: 100%;
        margin-right: 10px;
        height: 100%;
      }
      .bottom-right {
        width: 287px;
        min-width: 287px;
        height: 100%;
      }
    }
  }

  .tcen-right {
    width: 287px;
    min-width: 287px;

    .rtop {
      margin-bottom: 10px;
      height: ($-cent-height*6) / 11 - 5;
      // overflow: auto;
    }
    .rbottom {
      height: ($-cent-height*5) / 11 - 5;
    }
  }

  .cen-top {
    .tcen-right {
      margin-left: 10px;
    }

    & .rtop, .tradcen{
      height: ($-cent-height*6) / 11 - 5;
    }

    .tradcen {
      max-width: 675px;
      flex: 1;
    }
    background: none !important;
  }
}

.box-shadow {
  border: 1px solid rgba(228, 227, 227, 0.7);
  box-shadow: none
}

.trading-bottom {

}

.plr30 {
  padding: 0 30px;
}
.activebannerMain {
  position: relative;

  span.close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 3px;
    background: rgba(255, 255, 255, .7);
    cursor: pointer;

    i {
      font-size: 20px;
    }
  }
  .activebanner {
    display: flex;
    justify-items: center;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    width: 100%;
    height: 60px;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
    img {
      width: 100%;
    }
    span:nth-child(1) {
      font-size: 20px;
      padding-right: 15px;
    }
    span:nth-child(2) {
    }
    span:nth-child(3) {
      display: inline-block;
      padding: 3px 30px;
      border-radius: 5px;
      color: #B15132;
      background: #FFFB75;
      margin-left: 100px;
      cursor: pointer;
    }
  }
}

.theme-278EDA {
  .trading-app .table-sty{
    // background: #fff;
  }
  .trading-app {
    // background: #fff;
  }
}


.theme-1B1D27 {
  .btboxbg {
    background: $-topcolor2;
  }
  .box-shadow {
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: none;
    background: $-topcolor;
  }
  .tradcen {
    width: 616px;
    background: $-topcolor;
  }
  .topcolor {
    background: $-topcolor3;
  }
  .trading-bottom {
  }

  .trading-center {
    .cen-top{
    }
  }
}

.btbox {
  padding: 5px;
}

</style>

